import React, { useRef } from 'react'
import PubSub from 'pubsub-js'
export default function Search() {

  const inputRef = useRef()

  const search = () => {
    // 得到输入的关键字
    const keyword = inputRef.current.value
    if (keyword) {
      // 将keyword传递给Main, 让Main启动请求流程
      PubSub.publish('search', keyword)
      
      // 清除输入
      inputRef.current.value = ''
    }
    
  }
  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" ref={inputRef}/>
        <button onClick={search}>Search</button>
      </div>
    </section>
  )
}
